<template>
  <div>
    <div class="header">
      <div class="title">垃圾监管</div>
    </div>
    <div class="report">
      <router-link to="/trashPickupMain">
      <span class="report-text">垃圾清运数量上报</span>
       </router-link>
    </div>
    <div class="sub">
      <router-link to="/eventDiscoveryMain">
      <div class="sub-item eventfind">
        <span>事件发现</span>
        <span class="eventfind-icon"></span>
        <!-- <i v-show="notice">{{ notice }}</i> -->
      </div>
      </router-link>
      <router-link to="/workingEventsMain">
        <div class="sub-item eventon">
          <span>在办事件</span>
          <span class="eventon-icon"></span>
        </div>
      </router-link>
      <router-link to="/eventListMain">
        <div class="sub-item eventlist">
          <span>事件列表</span>
          <span class="eventlist-icon"></span>
        </div>
      </router-link>
       <router-link to="/regulatoryPower">
      <div class="sub-item power">
        <span>监管力量</span>
        <span class="power-icon"></span>
      </div>
       </router-link>
    </div>
    <div class="footer">
      <p>老西门街道办事处总办</p>
      <p>联系电话:xxx-xxxxxx</p>
      <p>copyright@2021-2022</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      notice: 1,
    };
  },
  created(){

  //  var reg = RegExp(/token/);
  //   let str = window.location.href;
  //   if(str && str.match(reg)){
  //       let index = str.indexOf('token=')
  //       let arr = str.substring(index+6,str.length)
  //       console.log('主页token='+arr)
  //       sessionStorage.setItem('token',arr)
  //   }
  },
  methods: {

  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  width: 100%;
  height: 300px;
  /* background: #00c4c6; */
  background-image: url('~@/assets/img/home/wasteRegulation-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 18px;
}
.header .title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
}
.report {
  width: 70%;
  height: 60px;
  /* background: rgb(23, 34, 197); */
  background-image: url('~@/assets/img/home//wasteRegulation-pickup.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 280px;
  left: 15%;
}
.report-text{
  display: inline-block;
  width: 100%;
  height: 60px;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  line-height: 60px;
}
.sub {
  width: 90%;
  height: 225px;
  margin: auto;
  margin-top: 50px;
  overflow: hidden;
}
.sub-item {
  width: 48%;
  height: 90px;
  float: left;
  margin: 2% 1% 0px 1%;
  text-align: left;
  padding: 10px 20px;
  box-sizing: border-box;
  position: relative;
  border-radius: 20px;
}
.eventfind{
  background: linear-gradient(-55deg, #73CDFF 0%, #5594FF 100%);
}
.eventon{
  background: linear-gradient(-55deg, #FF9A67 0%, #FF645F 100%);
}
.eventlist{
  background: linear-gradient(-55deg, #AF82FF 0%, #6E76FF 100%);
}
.power{
  background: linear-gradient(-55deg, #49C628 0%, #61E253 100%);
}
.eventfind i {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f44f38;
  text-align: center;
  line-height: 20px;
  font-weight: bold;
  color: #fff;
  padding: 2px;
}
.eventfind-icon{
  width: 58px;
  height: 58px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-image: url('~@/assets/img/home//wasteRegulation-events-found.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.eventon-icon{
  width: 58px;
  height: 58px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-image: url('~@/assets/img/home//wasteRegulation-working-events.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.eventlist-icon{
  width: 58px;
  height: 58px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-image: url('~@/assets/img/home//wasteRegulation-event-list.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.power-icon{
  width: 58px;
  height: 58px;
  position: absolute;
  right: 20px;
  top: 20px;
  background-image: url('~@/assets/img/home//wasteRegulation-regulatory-power.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.sub-item span {
  color: #fff;
}
.footer {
  width: 100%;
  font-size: 12px;
  color: #c6c8c7;
  line-height: 8px;
  margin-top: 25px;
    text-align: center;
}
</style>
